<template>
    <el-container class="container">
        <div class="box">
            <n-divider>
                <h2 style="color: #ccc;">后台管理系统</h2>
            </n-divider>
            <el-form :model="form" :rules="rules" ref="ruleFormRef">
                <el-form-item prop="username">
                    <el-input v-model="form.username" size="large" placeholder="用户名或邮箱" clearable>
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                            <el-divider direction="vertical" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" size="large" placeholder="密码" show-password clearable>
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                            <el-divider direction="vertical" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.auto" size="large" style="color: #ccc;">自动登录</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <Vcode :show="isShow" @success="onSuccess" @close="onClose(ruleFormRef)" @fail="fail" :imgs="imgs" />
                    <el-button type="primary" :loading="loading" @click="submit(ruleFormRef)" size="large">
                        {{ loading ? '登录中...' : '登 录' }}
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from "vue";
import { ElMessage, ElFormItem, ElForm, ElContainer, ElButton, ElCheckbox, ElDivider, ElIcon, ElInput } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { NDivider } from "naive-ui";
import { login, oncelogin } from '@/Apis/modules/login'
import Vcode from 'vue3-puzzle-vcode';
import Imgs1 from '../../assets/imgs/slide1.jpg'
import Imgs2 from '../../assets/imgs/slide2.jpg'
import Imgs3 from '../../assets/imgs/slide3.jpg'
import Imgs4 from '../../assets/imgs/slide4.jpg'
import Imgs5 from '../../assets/imgs/slide5.jpg'
import debounce from "@/utils/debounce";

const imgs = ref([Imgs1, Imgs2, Imgs3, Imgs4, Imgs5]);
const loading = ref(false);
const ruleFormRef = ref();
const isShow = ref(false);
const form = ref({
    username: '',
    password: '',
    auto: false
})

const rules = ref({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

const submit = debounce(async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            isShow.value = true;
        } else {
            ElMessage.error('用户名或密码不正确');
        }
    })
}, 1000);

// 图形验证成功则执行异步请求
const onSuccess = async () => {
    let timer
    const data = {
        username: form.value.username,
        password: form.value.password
    }

    isShow.value = false;
    if (form.value.auto) {
        loading.value = true
        timer = setTimeout(async () => {
            // 动画关闭需要一定的时间
            setTimeout(() => {
                loading.value = false
            }, 400)
            await login(data);
        }, 1000)
    } else {
        loading.value = true
        timer = setTimeout(async () => {
            // 动画关闭需要一定的时间
            setTimeout(() => {
                loading.value = false
            }, 400)
            await oncelogin(data);
        }, 1000)
    }
};

// 关闭图形验证码
const onClose = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    isShow.value = false;
};

const fail = () => {
    ElMessage.error('验证失败');
}

const enter = (e, formEl) => {
    if (e.key === "Enter") {
        submit(formEl);
    }
}

// 监听事件
onMounted(() => {
    document.addEventListener("keyup", (e) => enter(e, ruleFormRef.value));
})
// 移除事件
onBeforeMount(() => {
    document.removeEventListener("keyup", (e) => enter(e, ruleFormRef.value));
})

// 每20秒切换一次背景图片
let currentImageIndex = 0;

const transitionBackgroundImage = () => {
    const container = document.querySelector('.container');
    container.style.backgroundImage = `url(${imgs.value[currentImageIndex]})`;
    currentImageIndex = (currentImageIndex + 1) % imgs.value.length;
}

onMounted(() => {
    setInterval(transitionBackgroundImage, 20000);
})
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url('../../assets/imgs/slide1.jpg');
    background-position: center;
    animation: fade 1s ease-in-out forwards;
    transition: background-image 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.box {
    padding: 0 30px;
    width: 25vw;
    height: 340px;
    border-radius: 8px;
    background-color: #fff;
}

button {
    margin: 0 auto;
    width: 100%;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>